<template>
  <div>
    <page-header></page-header>

    <div class="page-body">

      <div class="page-body1">
        <page-side></page-side>
      </div>

      <div class="page-body2">
        <div>
          <div class="swipe">
            <el-carousel :interval="3000" type="card" height="300px" >
              <el-carousel-item v-for="(item,index) in imglist" :key="index">
                <img class="top-img" :src="item.imgurl">
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="released">
          <div class="released_title">发布二手商品</div>
          <div>
            <el-form :label-position="labelPosition" label-width="100px" :model="reseasedata">
              <el-form-item label="发布标题"  prop="title">
                <el-input v-model="reseasedata.title">标题</el-input>
              </el-form-item>
              <el-form-item label="所属类型"  prop="goodType">
                <div class="selectedtype">
                  <el-select v-model="reseasedata.goodstype" placeholder="请选择">
                    <el-option
                      v-for="item in goodsType"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
              <el-form-item label="具体描述" prop="discribe">
                <el-input v-model="reseasedata.describe"></el-input>
              </el-form-item>
              <el-form-item label="发布价格" prop="price">
                <el-input v-model="reseasedata.price"></el-input>
              </el-form-item>
              <el-form-item label="联系QQ" prop="qq">
                <el-input v-model="reseasedata.qq"></el-input>
              </el-form-item>
              <el-form-item label="联系号码" prop="phone">
                <el-input v-model="reseasedata.mobile"></el-input>
              </el-form-item>
              <el-form-item label="联系微信" prop="wechat">
                <el-input v-model="reseasedata.wechat"></el-input>
              </el-form-item>
              <el-form-item label="发布地点" prop="releaseaddress">
                <el-input v-model="reseasedata.releaseaddress"></el-input>
              </el-form-item>
              <!--商品图片-->
              <el-form-item label="商品图片" prop="goodsimg">
                // http://www.kkw.com/uploads 上传图片的地址
                <el-upload
                  class="upload-demo"
                  action="http://www.kkw.com/uploads"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :headers="headers"
                  :file-list="fileList"
                  list-type="picture">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="releaseGoods()">确认发布</el-button>
                <el-button @click="resetForm('reseasedata')">重置信息</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <page-footer></page-footer>
      </div>

    </div>
  </div>
</template>

<script>
import PageHeader from '@/components/pages/pageheader'
import PageSide from '@/components/pages/PageSide'
import PageContent from '@/components/pages/PageContent'
import PageFooter from '@/components/pages/PageFooter'
import remote from '@/utils/http'
import getHeader from '@/utils/header'

export default {
  name: 'ReleasesGoods',
  components: { PageHeader, PageSide, PageContent, PageFooter },
  data () {
    return {
      headers: getHeader(),
      imglist: [
        { id: 1, imgurl: '/static/second/1.jpg' },
        { id: 2, imgurl: '/static/second/2.jpg' },
        { id: 3, imgurl: '/static/second/3.jpg' },
        { id: 4, imgurl: '/static/second/4.jpg' },
        { id: 5, imgurl: '/static/second/5.jpg' },
        { id: 6, imgurl: '/static/second/6.jpg' },
        { id: 7, imgurl: '/static/second/3.jpg' }
      ],
      labelPosition: 'left', // 对齐方式
      // 表单数据
      reseasedata: {
        title: '',
        describe: '',
        goodstype: '',
        price: 0,
        qq: '',
        mobile: '',
        wechat: '',
        releaseaddress: ''
      },
      // 商品图片
      fileList: [],
      // 接收到的商品类型数据列表
      goodsType: []
    }
  },
  created () {
    this.earntype()
    console.log(' 头部', getHeader())
  },
  methods: {

    // 点击确认发布按钮
    releaseGoods () {
      let that = this
      console.log(this.reseasedata)
      remote('release', 'psot', {
        'title': this.reseasedata.title,
        'describe': this.reseasedata.describe,
        'goodstype': this.reseasedata.goodstype,
        'price': this.reseasedata.price,
        'qq': this.reseasedata.qq,
        'mobile': this.reseasedata.mobile,
        'wechat': this.reseasedata.wechat,
        'address': this.reseasedata.releaseaddress
      }).then(response => {
        if (response.code === 0) {
          that.$message({
            message: response.message,
            type: 'success'
          })
        } else {
          that.$message({
            message: response.message,
            type: 'error'
          })
        }
      })
    },
    // 获取分类
    // earntype () {
    //   remote('earntype', false, {}).then(res => {
    //     if (res.code === 0) {
    //       this.goodsType = res.data.data
    //     } else {
    //       alert('出错了')
    //     }
    //   })
    // },
    earntype () {
      remote('earntype', false, {}).then(res => {
        console.log(res.data, '接收到的数据商品的列表')
        if (res.code === 0) {
          this.goodsType = res.data
          console.log(this.goodsTypelist[1].name)
        } else {
          alert('出错了')
        }
      })
    },
    // 上传图片回调element-ui
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    }
  }
}
</script>

<style scoped>
  .page-body {
    padding-top: 80px;
    padding-right: 20px;
    padding-left: 20px;
    display: flex;
    width: 98%;
  }
  .page-body1 {
    width: 13%;
    display: block;
    overflow: auto;
  }
  .page-body2 {
    width: 87%;
  }
  /* ----------------------------轮播-------------------------------------- */
  .swipe {
    margin: 20px 0;
    padding: 10px 20px;
    border: 2px solid #1296db;
  }
  .top-img {
    width: 100%;
  }
  /*--------------------发布二手商品-------------------------*/
  .released{
    border: 2px solid #1296db;
    padding: 12px 100px;
    border-radius: 3px;
    text-align: center;
  }
  /*---------------发布二手商品标题------------------*/
  .released_title{
    background-color: #1296db;
    font-size: 40px;
    letter-spacing: 10px;
    padding: 10px 0;
    margin-bottom: 30px;
    border-radius: 5px;
    color: white;
    text-align: center;
  }
  /*---------------发布二手商品内容------------------*/
  /*上传图片*/
  .upload{
    border: 1px solid #999999;
    /*display: flex;*/
    /*padding: 10px 50px;*/
    /*justify-content: flex-start;*/
  }
  .selectedtype{
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }
</style>
